import Actions from '@/components/Actions/index';
import MainTain from '@/components/MainTain/index';
import { useModel } from '@umijs/max';
import { ConfigProvider, Drawer, Flex, Grid } from 'antd';
import { useCallback, useEffect, useRef, useState } from 'react';
import './index.less';

const { useBreakpoint } = Grid;

let n = 0;
function Home() {
  const { lg } = useBreakpoint();
  const { initialState } = useModel('@@initialState');

  useEffect(() => {
    localStorage.setItem('INIT', JSON.stringify(initialState));
  }, [initialState]);

  const [drawer, setDrawer] = useState({
    open: false,
    destroyOnClose: true,
    closable: false,
    width: '100%',
    onClose: () => {
      setDrawer((s) => ({
        ...s,
        open: false,
      }));
    },
  });

  const dom = useCallback(
    (width, margin, padding) => (
      <div className="App" style={{ width, margin, padding }}>
        <Actions setDrawer={setDrawer}></Actions>
      </div>
    ),
    [],
  );

  useEffect(() => {
    if(n < 2){
      n ++;
      return ;
    }
    setDrawer((s) => ({
      ...s,
      open: !lg,
    }));
  }, [lg]);

  return (
    <ConfigProvider
      theme={{
        token: {
          paddingLG: 0,
        },
      }}
    >
      <Flex style={{ height: '100vh' }}>
        {lg && dom(550, '0', '0 12px 12px 12px')}
        <MainTain {...{ setDrawer, drawer }}></MainTain>

        <Drawer {...drawer}>{dom('100%', '-12px 0 0 0', 12)}</Drawer>
      </Flex>
    </ConfigProvider>
  );
}

export default Home;
